<template>
  <div v-if="isOpen">
    <el-table :data="courses.filter((data) => !search || data.Name.toLowerCase().includes(search.toLowerCase()))" :default-sort="{ prop: 'Class', order: 'descending' }" style="width: 100%">
      <el-table-column label="名称" prop="Name" sortable> </el-table-column>
      <el-table-column label="类型" prop="Class" sortable> </el-table-column>
      <el-table-column label="授课教师" prop="TeacherID" sortable> </el-table-column>
      <el-table-column label="学分" prop="Credit" sortable> </el-table-column>
      <el-table-column label="周几" prop="Day" sortable> </el-table-column>
      <el-table-column label="第几节" prop="Time" sortable> </el-table-column>
      <el-table-column label="选课人数" prop="selectNum" sortable> </el-table-column>
      <el-table-column label="上限人数" prop="Max" sortable> </el-table-column>
      <el-table-column align="right">
        <!-- eslint-disable -->
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入课程名搜索" />
        </template>
        <template slot-scope="scope">
          <el-button v-if="buttonType(scope.row) == 'ok'" size="mini" type="primary" :disabled="buttonDisable" @click="selectCourse(scope.row)">选课</el-button>
          <el-button v-else-if="buttonType(scope.row) == 'selected'" size="mini" type="danger" :disabled="buttonDisable" @click="deleteCourse(scope.row)">退课</el-button>
          <el-button v-else-if="buttonType(scope.row) == 'sameClass'" size="mini" type="warning" disabled>同类</el-button>
          <el-button v-else-if="buttonType(scope.row) == 'noTime'" size="mini" type="warning" disabled>有课</el-button>
          <el-button v-else-if="buttonType(scope.row) == 'full'" size="mini" type="info" disabled>满员</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div v-else>
    <p>未在规定时间，不能操作！操作时间为{{ startTime }} - {{ endTime }}</p>
  </div>
</template>

<script>
export default {
  name: 'StudentAction',
  data() {
    return {
      ID: '',
      isOpen: true,
      startTime: '',
      endTime: '',
      courses: [],
      selectedCourses: [],
      search: '',
      buttonDisable: false,
      term: 5
    }
  },
  async created() {
    this.ID = localStorage.getItem('token').split('/')[1]
    this.buttonDisable = true
    const { data: res } = await this.$http.post('/getStudentName', { ID: this.ID })
    this.term = res.term
    const { data: res1 } = await this.$http.post('/getSelectTime', { type: 'student' })
    const time = new Date()
    this.startTime = new Date(res1.startTime)
    this.endTime = new Date(res1.endTime)
    if (!(time < this.startTime || time > this.endTime)) {
      this.isOpen = true
    } else this.isOpen = false
    const { data: res2 } = await this.$http.post('/opTable', {
      type: 'select',
      table: 'courses',
      data: {
        Term: this.term
      }
    })
    this.courses = res2
    const { data: res3 } = await this.$http.post('/getStudentCourse', { ID: this.ID })
    this.selectedCourses = res3
    const { data: res4 } = await this.$http.post('/getCourseSelectNum', { list: this.courses })
    for (const i of this.courses) {
      for (const j of res4) {
        if (i.TeacherID === j.TeacherID && i.Name === j.Course) {
          i.selectNum = j.selectNum
        }
      }
    }
    this.buttonDisable = false
  },
  methods: {
    buttonType(course) {
      for (const item of this.selectedCourses) {
        if (item.TeacherID === course.TeacherID && item.Name === course.Name) {
          return 'selected'
        }
      }
      for (const item of this.selectedCourses) {
        if (item.Class === course.Class) {
          return 'sameClass'
        }
      }
      for (const item of this.selectedCourses) {
        if (item.Day === course.Day && item.Time === course.Time) {
          return 'noTime'
        }
      }
      if (course.selectNum >= course.Max) return 'full'
      return 'ok'
    },
    async selectCourse(course) {
      this.buttonDisable = true

      const { data: res } = await this.$http.post('/opTable', {
        type: 'insert',
        table: 'select',
        data: {
          Course: course.Name,
          StudentID: this.ID,
          TeacherID: course.TeacherID
        }
      })
      if (res) {
        this.$message({
          type: 'info',
          message: '课程选择成功！',
          duration: 1500
        })
      } else {
        this.$alert('课程选择失败！', '提示信息', {
          confirmButtonText: '确定'
        })
      }
      const { data: res1 } = await this.$http.post('/getStudentCourse', { ID: this.ID })
      this.selectedCourses = res1
      const { data: res2 } = await this.$http.post('/getCourseSelectNum', { list: this.courses })
      for (const i of this.courses) {
        for (const j of res2) {
          if (i.TeacherID === j.TeacherID && i.Name === j.Course) {
            i.selectNum = j.selectNum
          }
        }
      }
      this.buttonDisable = false
    },
    async deleteCourse(course) {
      this.$confirm('此操作将取消选课, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.buttonDisable = true
          const { data: res } = await this.$http.post('/opTable', { type: 'delete', table: 'select', data: { Course: course.Name, TeacherID: course.TeacherID } })
          if (res) {
            this.$alert('课程删除成功！', '提示信息', {
              confirmButtonText: '确定'
            })
          } else {
            this.$alert('课程删除失败！', '提示信息', {
              confirmButtonText: '确定'
            })
          }
          const { data: res1 } = await this.$http.post('/getStudentCourse', { ID: this.ID })
          this.selectedCourses = res1
          const { data: res2 } = await this.$http.post('/getCourseSelectNum', { list: this.courses })
          for (const i of this.courses) {
            for (const j of res2) {
              if (i.TeacherID === j.TeacherID && i.Name === j.Course) {
                i.selectNum = j.selectNum
              }
            }
          }
          this.buttonDisable = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
            duration: 1500
          })
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
